// rotatedeg 小角度 -----------------------------------
$rotatedeg: 15 !default;
$rotatedeg-interval: 1deg !default;

@for $i from 1 through $rotatedeg {
  .rotate-deg#{$i} {
    -webkit-animation: rotate-deg#{$i} 3s ease-in-out infinite both;
    animation: rotate-deg#{$i} 3s ease-in-out infinite both;
  }

  @keyframes rotate-deg#{$i} {

    0%,
    100% {
      transform: rotate($rotatedeg-interval * $i);
      -webkit-transform: rotate($rotatedeg-interval * $i);
    }

    50% {
      transform: rotate(-$rotatedeg-interval * $i);
      -webkit-transform: rotate(-$rotatedeg-interval * $i);
    }
  }

  @-webkit-keyframes rotate-deg#{$i} {

    0%,
    100% {
      transform: rotate($rotatedeg-interval * $i);
      -webkit-transform: rotate($rotatedeg-interval * $i);
    }

    50% {
      transform: rotate(-$rotatedeg-interval * $i);
      -webkit-transform: rotate(-$rotatedeg-interval * $i);
    }
  }
}

// animation-delay ----
$gridColumns: 100 !default;
$animation-delay: .2s !default;

@for $i from 1 through $gridColumns {
  .animation-delay#{$i} {
    animation-delay: $animation-delay * $i !important;
    -webkit-animation-delay: $animation-delay * $i !important;
  }
}

// animation-duration ----
$animation-duration: .2s !default;

@for $i from 1 through $gridColumns {
  .animation-duration#{$i} {
    animation-duration: $animation-duration * $i !important;
    -webkit-animation-duration: $animation-duration * $i !important;
  }
}

// transform-scale ----
$transform-scale-num: 20;
$transform-scale: .2 !default;

@for $i from 1 through $transform-scale-num {
  .transform-scale#{$i} {
    transform: scale($transform-scale * $i) !important;
    -webkit-transform: scale($transform-scale * $i) !important;
  }
}

// font-size-1 ----
$font-size: 1 !default;
$font-size-num: 80;

@for $i from 1 through $font-size-num {
  .font-size#{$font-size * $i} {
    font-size: #{$font-size * $i}upx;
  }
}

// eg top1 * width1 * height1 * margin-top1 * padding-top1
$top: 1 !default;
$top-num: 100; //
$positive-list: (top: 'top',
  bottom: 'bottom',
  left: 'left',
  right: 'right',
  width: 'width',
  min-width: 'min-width',
  height: 'height',
  min-height: 'min-height',
  margin:'margin',
  margin-top:'margin-top',
  margin-bottom:'margin-bottom',
  margin-left:'margin-left',
  margin-right:'margin-right',
  padding:'padding',
  padding-top:'padding-top',
  padding-bottom:'padding-bottom',
  padding-left:'padding-left',
  padding-right:'padding-right',
);

@for $i from 1 through $top-num {

  @each $index,
  $value in $positive-list {
    .#{$value}#{$top * $i} {
      #{$value}: #{$top * $i}upx;
    }
  }
}

// padding0 padding-top0 -- 增加权重
@each $index,
$value in $positive-list {
  .#{$value}0 {
    #{$value}: 0;
  }
}

// eg top-1
$position-list: (top: 'top',
  bottom: 'bottom',
  left: 'left',
  right: 'right',
);

@for $i from 1 through $top-num {

  @each $index,
  $value in $position-list {
    .#{$value}#{-$top * $i} {
      #{$value}: #{-$top * $i}upx !important;
    }
  }
}

// eg width height width110 ... width500 间隔 10  *********  top110 ... top200  间隔 10
$width: 10 !default;
$width-num: 50;
$width-list: (width: 'width',
  height: 'height',
);

@for $i from 1 through $width-num {

  @each $index,
  $value in $width-list {
    @if ($width * $i)>$top-num {
      .#{$value}#{$width * $i} {
        #{$value}: #{$width * $i}upx !important;
      }
    }
  }

  @each $index,
  $value in $position-list {
    @if (($width * $i) > $top-num and ($width * $i) <=200) {
      .#{$value}#{$width * $i} {
        #{$value}: #{$width * $i}upx !important;
      }
    }
  }
}

// 自定义 eg top108 * width108 * height108 * margin-top108 * padding-top108
$width-num-list: (width108:108,
);

@each $index,
$value in $positive-list {

  @each $i,
  $v in $width-num-list {
    .#{$value}#{$v} {
      #{$value}: #{$v}upx !important;
    }
  }
}

// eg 百分比 width1-2
$width-percent-list: (pct2: 2,
  pct3: 3,
  pct4: 4,
  pct5: 5,
  pct6: 6,
);

@mixin width-pct {

  @each $index,
  $value in $width-percent-list {
    .width1-#{$value} {
      width: (100%/$value);
    }
  }
}

@include width-pct;

// color -------
$color-list: (black: rgba(0, 0, 0, 1),
  white: rgba(255, 255, 255, 1),
  blue:rgba(99, 179, 240, 1),
  red: rgba(255, 0, 0, 1),
  green: rgba(0, 255, 0, 1),
  gray: rgba(249, 249, 249, 1),
  pink: rgba(255, 100, 119, 1),
  orange:rgba(245, 113, 57, 1),
  yellow:rgba(216, 216, 17, 1),
);

@mixin color-bgcolor {

  @each $index,
  $value in $color-list {
    :root {
      --color-#{$index}: #{$value};
    }

    .color-#{$index} {
      color: #{$value} !important;
    }

    .bg-color-#{$index} {
      background-color: #{$value} !important;
    }

    .border-color-#{$index} {
      border: 1upx solid #{$value} !important;
    }

    .border-top-color-#{$index} {
      border-top: 1upx solid #{$value} !important;
    }

    .border-left-color-#{$index} {
      border-left: 1upx solid #{$value} !important;
    }
  }
}

@include color-bgcolor;


// border-radius12
$border-radius-num:80;
$border-radius-list: (border-radius: 'border-radius',
  border-top-left-radius:'border-top-left-radius',
  border-top-right-radius:'border-top-right-radius',
  border-bottom-left-radius:'border-bottom-left-radius',
  border-bottom-right-radius:'border-bottom-right-radius',
);

@for $i from 0 through $border-radius-num {

  @each $index,
  $value in $border-radius-list {
    .#{$value}#{$i} {
      #{$value}: #{$i}upx !important;
    }
  }
}

// border-radius
@each $index,
$value in $border-radius-list {
  .#{$value} {
    #{$value}: 1000upx !important;
  }
}